odoo.define('odoo-echarts.MyChart', function (require) {
    "use strict";
    var AbstractAction = require('web.AbstractAction');
    var core = require('web.core');
    var rpc = require('web.rpc');
    var QWeb = core.qweb;
    var MyChart = AbstractAction.extend({
        template: 'odoo-echarts.my_chart_template',
        start: function () {
            this._super.apply(this, arguments);
            // 使用 on_attach_callback 确保 DOM 已渲染
            this.on_attach_callback();
        },
        //在 Odoo 16中，使用 on_attach_callback 方法来确保 DOM 元素已经渲染 保证myChart div已经加载上了
        on_attach_callback: function () {
            var self = this;
            rpc.query({
                route: '/echarts/chart_data',
                params:{},
            }).then(function (data) {
                // 使用原生的 document.getElementById 来选择 DOM 元素
                var myChartElement = document.getElementById('myChart');
                if (myChartElement) {
                    var myChart = echarts.init(myChartElement);
                    var option = {
                        title: {
                            text: '销量柱状图'
                        },
                        tooltip: {},
                        xAxis: {
                            // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                            data: data.xAxis
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            //data: [5, 20, 36, 10, 10, 20]
                            data: data.series
                        }]
                    };
                    myChart.setOption(option);
                } else {
                    console.error('Chart container element not found');
                }
            });
        },
    });
    core.action_registry.add('my_chart_action', MyChart);
    return MyChart;

});
